<template>
    <div>
        <div class="header-title">
            <span @click="$router.go(-1)" class="mint-toast-icon mintui mintui-back"></span>
            <span>绑定手机</span>
            <span></span>
        </div>
        <div class="num-list">
            <div class="input-area">
                <div @click="areaPage = true">
                    <span>手机</span>
                    <span>+{{phoneArea}}</span>
                    <span class="fa fa-angle-down"></span>
                </div>
                <input v-model="phoneRegister.accounts" type="text" name="" id="" placeholder="请输入手机号">
            </div>
            <div class="input-code">
                <input v-model="phoneRegister.code" type="text" name="" id="" placeholder="请输入短信验证码">
                <span class="code" @click="getCodeFather">
                    <sendPhoneCode :phoneArea="phoneArea" :phone="phoneRegister.accounts" ref="childCode"></sendPhoneCode>
                </span>
            </div>
            <mt-button @click="phoneBind" size="normal" class="submit-btn">绑定</mt-button>
        </div>
        <!-- 获取区号 -->
        <transition name="fade" mode="out-in">
            <div v-if="areaPage">
                <areaCode @getAreaPage="getAreaPage" @getPhoneArea="getPhoneArea"></areaCode>
            </div>
        </transition>
    </div>
</template>
<script>
import sendPhoneCode from "../../../components/getPhoneCode";
import areaCode from "../../../components/areaCode";
import { Toast } from "mint-ui";
export default {
    data(){
        return{  
            phoneArea:"86",//区号
            areaPage: false, //区号页的显示与隐藏
            token:JSON.parse(this.$store.state.userMsg).token,
            //手机号验证
            phoneRegister: {
                accounts: "",
                code: ""
            },
        }
    },
    components: {
        sendPhoneCode,
        areaCode
    },
    methods: {
        //获取验证码
        getCodeFather() {
            this.$refs.childCode.getCodeChild();
        },
        //关闭获取区号页
        getAreaPage(status) {
            this.areaPage = status;
        },
        //获取手机区号
        getPhoneArea(areaNum) {
            this.phoneArea = areaNum;
            console.log(this.phoneArea, 999);
        },
        //绑定手机号
        phoneBind(){
            if (this.phoneRegister.code == "" && this.phoneRegister.accounts == "" ) {
                    Toast({ message: "手机号和验证码不能为空！" });
                    return false;
            }
            var params = {
                token:this.token,
                newPhoneNo :this.phoneRegister.accounts,
                verificationCode :this.phoneRegister.code ,
            }
            this.$axios.post(this.address.updatePhoneNo,params).then(res => {
                console.log(res.data)
                if(res.data.code == 200){
                    Toast({ message: "绑定成功！" });
                    //改变存储的user信息
                    var users = JSON.parse(this.$store.state.userMsg)
                    users.phoneNo = this.phoneRegister.accounts
                    this.$store.commit('getUserMsg',JSON.stringify(users))
                    this.$router.push({ name: "safetyCenter" });
                }else{
                    Toast({ message: res.data.msg });
                }
            })
        }
    }
};
</script>
<style lang="less" scoped>
.num-list {
    padding: 15px;
    box-sizing: border-box;
}
</style>
